<template >
  <div class="box">
    <van-nav-bar title="H币提现" />
    <van-steps direction="vertical" :active="1">
      <van-step>
        <h3>发起提现申请</h3>
      </van-step>
      <van-step active-icon>
        <h3>银行处理中</h3>
        <p>预计03-12 12:35前到胀</p>
      </van-step>
      <van-step>
        <h3>到账成功</h3>
      </van-step>
    </van-steps>
    <div class="custom-cell-group">
      <div class="custom-cell">
        <div class="value">提现金额</div>
        <div class="title">￥{{ totalHCoinsFromRoute }}</div>
      </div>
      <div class="custom-cell">
        <div class="value">到账银行卡</div>
        <div class="title">{{ bankCard }} 尾号 9276</div>
      </div>
    </div>
    <van-button class="wctzym" type="primary" @click="Wctyet">完成</van-button>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'
export default {
  name: 'MultiDataComponent',
  computed: {
    bankCard() {
      // 从路由的query中获取totaly值
      return this.$route.query.bankCard
    }
  },
  setup() {
    const route = useRoute()
    const totalHCoinsFromRoute = route.query.totaly
    const Transmission = totalHCoinsFromRoute*10
    return {totalHCoinsFromRoute,Transmission}
  },
  methods: {
    Wctyet() {
      this.$router.push({ path: '/wallet',query: { totaly: this.Transmission,  } })
    }
  }
}
</script>
<style>
.van-step--vertical {
  display: block;
  float: none;
  padding: 30px 10px 10px 0;
  line-height: var(--van-line-height-sm);
}
.custom-cell-group {
  display: flex;
  flex-direction: column;
}

.custom-cell {
  border-bottom: 1px solid #ebeef5; /* 边框样式 */
  padding: 15px; /* 内边距 */
  display: flex;
  justify-content: space-between; /* 让value和title分布在两端 */
  align-items: center; /* 垂直居中 */
}

.value {
  font-size: 14px; /* 字体大小 */
  color: #909399; /* 文字颜色*/
}

.title {
  font-size: 14px; /* 字体大小 */
  color: #333; /* 文字颜色 */
}
.wctzym {
  width: 90%;
  height: 35px;
  margin: 230px 20px 10px 20px;
}
</style>